<template>
    <div class="my">
        <!-- 用户信息 -->
        <van-popup v-model="showSetting" position="right" :style="{ height: '100%',width:'40%' }">
            <van-cell-group>
                <van-cell title="个人资料" :center="true" :title-style="{textAlign:'center'}" to="/userInfo"/>
                <van-cell-group title="会员管理">
                    <van-cell title="升级会员"
                              :center="true"
                              @click="todo"
                              :title-style="{color:'#999',textAlign:'center'}"/>
                    <van-cell title="积分详情"
                              :center="true"
                              @click="todo"
                              :title-style="{color:'#999',textAlign:'center'}"/>
                </van-cell-group>
                <van-cell-group title="帐号管理">
                    <van-cell title="修改密码"
                              :to="{name:'Register',params:{type:2}}"
                              :center="true"
                              :title-style="{textAlign:'center'}"/>
                    <van-cell title="切换帐号"
                              to="/login"
                              :center="true"
                              :title-style="{textAlign:'center'}"/>
                    <van-cell title="退出登陆"
                              :center="true"
                              @click="onLoginOut"
                              :title-style="{color:'red',textAlign:'center'}"/>
                </van-cell-group>
            </van-cell-group>
        </van-popup>
        <span class="setting" @click="showPopup">
            <van-icon name="weapp-nav" size="25px"/>
        </span>
        <div class="user-info" v-if="userInfo">
            <div>
                <img class="user-avatar" :src="userInfo.avatar||require('./header.jpg')"/>
            </div>
            <div class="username">
                {{userInfo.username||userInfo.email}}
                <span class="icon-lists">
                    <router-link to="/userInfo"><van-icon name="edit" color="#1989fa"/></router-link>
                </span>
            </div>
        </div>
        <div class="user-info" v-else>
            <img class="user-avatar" src="./unlogin.png"/>
            <van-button type="default" plain size="small" to="login">去登录</van-button>
        </div>

        <!-- items -->
        <scroll ref="scroll"
                class="my-list"
                show-action
                shape="round"
                :data="vanCells"
                :listenScroll="true"
                :isSetPlayerStatus="true"
                :probeType="2"
        >
            <div class="list-item">
                <van-cell v-for="(vanCell,index) in vanCells"
                          :key="index"
                          :title="vanCell.title"
                          :icon="vanCell.icon"
                          color="#1989fa"
                          is-link size="large"
                          :to="vanCell.to"
                          v-if="vanCell.title != '联系我'"
                />
                <van-cell is-link
                          :icon="vanCell.icon"
                          :label="vanCell.label || null"
                          v-else>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                        <span class="custom-title">{{vanCell.title}}</span>
                        <van-tag type="danger" round>3</van-tag>
                    </template>
                </van-cell>
            </div>
        </scroll>

    </div>
</template>

<script>
    import Scroll from "@/components/scroll/scroll";
    import Vue from 'vue';
    import {
        Icon
        , Cell
        , CellGroup
        , Button
        , Toast
        , Popup
    } from 'vant';

    Vue.use(Popup)
        .use(Cell)
        .use(CellGroup)
        .use(Icon)
        .use(Button)
        .use(Toast);

    export default {
        data() {
            return {
                userInfo: null,
                showSetting: false,
                vanCells: [
                    {
                        title: "最近收听",
                        icon: "browsing-history-o",
                        to: "/recent"
                    },
                    {
                        title: "精选笔记",
                        icon: "notes-o",
                        to: "/note"
                    },
                    {
                        title: "我的收藏",
                        icon: "star-o",
                        to: "/myCollected"
                    },
                    {
                        title: "我的下载",
                        icon: "coupon-o",
                        to: "/downloadRecord"
                    },
                    // {
                    //     title: "联系我",
                    //     icon: "more-o",
                    //     to: "/myCollected",
                    //     label: "有时不在线.."
                    // },
                    {
                        title: "问题反馈",
                        icon: "question-o",
                        to: "/feedback"
                    },
                    {
                        title: "关于",
                        icon: "info-o",
                        to: "/about"
                    },
                ]
            }
        },
        created() {
            this.$store.commit("setPlayerStatus", true);
            this.$store.commit("setTabbarStatus", true);
            this.getUserInfo();
        },
        methods: {
            // 刷新用户登陆状态
            // 同步 cookie 和 localStorage 信息
            getUserInfo() {
                this.$http.get("account/checkLoginStatus").then((response) => {
                    let rs = response.data;
                    if (rs.code !== 1) {
                        localStorage.setItem("userInfo", null);
                    } else {
                        localStorage.setItem("userInfo", JSON.stringify(rs.data));
                    }
                    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
                });
            },
            // 登陆之后展示
            showPopup() {
                if(!this.userInfo){
                    Toast("登陆之后才可以操作！");
                    return false;
                }
                this.showSetting = true;
            },
            // 退出登陆
            onLoginOut() {
                var that = this;
                this.$http.get("/account/Logout").then(function (response) {
                    var rs = response.data;
                    if (rs.code === 1) {
                        Toast.success("已退出登陆");
                        localStorage.removeItem("userInfo");
                        that.getUserInfo();
                        that.showSetting = false;
                    }
                });
            },
            todo(){
                Toast.fail({
                    duration: 1000,
                    forbidClick: true,
                    message: '当前不可用',
                });
            }
        },
        components: {
            Scroll,
        }
    }
</script>

<style scoped>
    .my {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
    }

    .setting {
        position: fixed;
        right: 10px;
        top: 5px;
        z-index: 1;
    }

    /* 简单的flex布局 */
    .user-info {
        height: 180px;
        width: 100%;
        background: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 10px solid #fff;
    }

    .username {
        color: #666;
        display: block;
        font-size: 16px;
        margin-top: 5px;
    }

    .my-list {
        height: 70%;
        box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.5);
        background: #fff;
        border-radius: 7% 7% 0 0;
        overflow: hidden;
    }

    .list-item {
        padding: 20px 0 101px 0;

    }


</style>
